<template>
  <el-drawer
    :visible.sync="drawer"
    :direction="direction"
    size="941px"
    :modal="false"
    :close-on-click-modal="false"
    :wrapper-closable="false"
    :before-close="handleClose">
    <div class="content">
      <div class="close-icon" @click="handleClose">
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="title-id">
        <img src="@/assets/images/xq-xz.png" class="icon img-correct" />
        <span class="id">ID: {{ ruleForm.cTaskNo }}</span>
        <div class="operate">
          <i class="el-icon-copy-document"></i>
          <i class="el-icon-delete" style="margin-left: 10px"></i>
        </div>
        <div class="button-pos">
          <el-button type="primary" size="mini" @click="save">保存</el-button>
        </div>
      </div>

      <div class="info">
        <div class="name">
          <span class="xq">{{ ruleForm.cTaskNme }}</span>
          <el-tag class="tab-box" v-if="ruleForm.cTaskState == 1" type="info">未开始</el-tag>
          <el-tag class="tab-box" v-if="ruleForm.cTaskState == 2" type="warning">进行中</el-tag>
          <el-tag class="tab-box" v-if="ruleForm.cTaskState == 3" type="success">已完成</el-tag>
          <div class="highest" v-if="ruleForm.cTaskPri == 1">
            <div class="icon red2"></div>最高
          </div>
          <div class="highest" v-if="ruleForm.cTaskPri == 2">
            <div class="icon orange"></div>较高
          </div>
          <div class="highest" v-if="ruleForm.cTaskPri == 3">
            <div class="icon blue"></div>普通
          </div>
          <div class="highest" v-if="ruleForm.cTaskPri == 4">
            <div class="icon gray"></div>较低
          </div>
        </div>
        <div class="person">
          <span class="icon-name red" v-if="ruleForm.cCrePerNme">
            {{ ruleForm.cCrePerNme[ruleForm.cCrePerNme.length - 1] }}
          </span>
          <span>{{ ruleForm.cCrePerNme }}</span>
          <span style="margin: 0 40px 0 5px">{{ parseTime(ruleForm.tCreTm) }} 创建</span>
          <span class="icon-name red" v-if="ruleForm.cUpdPerNme">
            {{ ruleForm.cUpdPerNme[ruleForm.cUpdPerNme.length - 1] }}
          </span>
          <span>{{ ruleForm.cUpdPerNme }}</span>
          <span style="margin-left: 5px">{{ parseTime(ruleForm.tUpdTm) }} 更新</span>
        </div>
        <div class="but">
          <div class="title-head">
            描述
          </div>
        </div>
        <div class="des">
          <Editor v-model="ruleForm.cTaskDes" style="width: 845px" :height="174" />
        </div>
        <div class="title-head external">
          属性
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="任务来源" prop="cTaskSou">
                <el-select v-model="ruleForm.cTaskSou" placeholder="未设置">
                  <el-option
                    v-for="item in sourceOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务类型" prop="cTaskType">
                <el-select v-model="ruleForm.cTaskType" placeholder="未设置">
                  <el-option
                    v-for="item in demandOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建人" prop="cCrePer">
                <el-select disabled v-model="ruleForm.cCrePer" placeholder="未设置" style="width: 100%">
                  <el-option
                    v-for="item in cProHeadOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人" prop="cTaskHead">
                <el-select v-model="ruleForm.cTaskHead" placeholder="未设置">
                  <el-option
                    v-for="item in cProHeadOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务状态" prop="cTaskState">
                <el-select v-model="ruleForm.cTaskState" placeholder="未设置">
                  <el-option
                    v-for="item in cProStateOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="优先级" prop="cTaskPri">
                <el-select v-model="ruleForm.cTaskPri" placeholder="未设置">
                  <el-option
                    v-for="item in cDemPriOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <div class="highest2">
                      <div :class="handleIcon(item.value)"></div>
                      <span style="margin-left: 10px">{{ item.label }}</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="归属项目" prop="cProNo">
                <el-select v-model="ruleForm.cProNo" placeholder="未设置">
                  <el-option
                    v-for="item in ascriptionOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参与者" prop="participant">
                <el-cascader
                  style="width: 100%"
                  @change="handleParticipant"
                  v-model="participantList"
                  :show-all-levels="false"
                  :options="allPersonnel"
                  :props="{multiple: true,label: 'postName', children: 'users', value: 'postId'}"
                  placeholder="未设置"
                  clearable></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间" prop="tCreTm">
                <el-input disabled v-model="ruleForm.tCreTm"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更新时间" prop="tUpdTm">
                <el-input disabled v-model="ruleForm.tUpdTm"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="title-head external">
                周期与进度
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划开始时间" prop="tStaTm">
                <el-date-picker
                  v-model="ruleForm.tStaTm"
                  style="width: 317px"
                  type="datetime"
                  placeholder="未设置">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划完成时间" prop="tUpdTm">
                <el-date-picker
                  style="width: 317px"
                  v-model="ruleForm.tUpdTm"
                  type="datetime"
                  placeholder="未设置">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="进度(%)" prop="schedule">
                <el-input-number class="inputNumber" v-model="schedule" :controls="false" placeholder="未设置"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="title-head external">
                工时信息
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预估工时(h)" prop="cEstWork">
                <el-input-number class="inputNumber" v-model="ruleForm.cEstWork" :controls="false" placeholder="未设置"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="已登记工时(h)" prop="cRegWork">
                <el-input-number class="inputNumber" v-model="ruleForm.cRegWork" :controls="false" placeholder="未设置"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="剩余工时(h)" prop="cRemWork">
                <el-input-number class="inputNumber" v-model="ruleForm.cRemWork" :controls="false" placeholder="未设置"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工时进度" prop="cEstWork">
                <el-input disabled class="inputNumber" :value="workSchedule"  :controls="false" placeholder="未设置"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预估偏差" prop="cEstWork">
                <el-input disabled class="inputNumber" :value="deviation" :controls="false" placeholder="未设置"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="title-head external">
          关联工作项
          <el-button style="float: right;" type="primary" size="mini">新建</el-button>
          <el-button style="float: right;margin-right: 10px" type="primary" size="mini" @click="correlation">关联</el-button>
        </div>
        <div class="text-work">
          共<span class="red-text"> {{ configList.length }} </span>项关联工作项
        </div>
        <div>
          <el-table
            v-if="configList.length"
            v-loading="loading"
            ref="loopRef"
            :header-cell-style="{'background-color': '#F9F9F9'}"
            :data="configList"
            style="width: 97%"
            border>
            <el-table-column label="工作项名称" align="left" prop="cPmNme" sortable width="260">
              <template slot-scope="scope">
                <img src="@/assets/images/xq-xz.png" class="icon img-correct" />{{ scope.row.cPmNme }}
              </template>
            </el-table-column>
            <el-table-column label="工作项类型" align="center" prop="cPmType" width="120">
              <template slot-scope="scope">
                {{ handelCPmType(scope.row.cPmType) }}
              </template>
            </el-table-column>
            <el-table-column label="优先级" align="center" prop="cPmPri" width="120" sortable>
              <template slot-scope="scope">
                <div class="highest" v-if="scope.row.cPmPri == 1">
                  <div class="icon red2"></div>最高
                </div>
                <div class="highest" v-if="scope.row.cPmPri == 2">
                  <div class="icon orange"></div>较高
                </div>
                <div class="highest" v-if="scope.row.cPmPri == 3">
                  <div class="icon blue"></div>普通
                </div>
                <div class="highest" v-if="scope.row.cPmPri == 4">
                  <div class="icon gray"></div>较低
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="cPmState" width="120">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.cPmState == 1" class="primary">测试提交</el-tag>
                <el-tag v-if="scope.row.cPmState == 2" type="warning">进行中</el-tag>
                <el-tag v-if="scope.row.cPmState == 3" type="success">已完成</el-tag>
                <el-tag v-if="scope.row.cPmState == 4">测试通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="cCrePer" width="120">
              <template slot-scope="scope">
          <span v-if="scope.row.cCrePerNme">
            <span class="icon-name red">{{ scope.row.cCrePerNme[scope.row.cCrePerNme.length - 1] }}</span>
            <span>{{ scope.row.cCrePerNme }}</span>
          </span>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <i class="el-icon-setting" style="font-size: 18px"></i>
              </template>
              <template slot-scope="scope">
                <i class="el-icon-link" style="font-size: 18px;cursor: pointer" @click="handleTabClose(scope)"></i>
              </template>
            </el-table-column>
          </el-table>
          <span v-else style="color: #CCCCCC;margin-left: 30px">暂无关联工作项</span>
        </div>
        <div class="title-head external">
          附件
        </div>
        <el-upload
          class="upload-demo"
          drag
          :before-upload="handelUpLoad"
          action="#"
          :http-request="requestUpload"
          multiple>
          <i class="el-icon-upload2 icon"></i>
          <div class="text">上传附件</div>
        </el-upload>
        <div class="title-head external">
          动态
        </div>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in tablist" :label='item.label + " (" +item.num + ")"' :name="item.index" :key="index">
              <div class="dynamic" v-for="(item, index) in dynamicList" :key="index">
                <div class="cont" :title="item.cDynCom">
                  <span class="dynamic-name">{{ item.cCrePerNme }}: </span>
                  <span>{{ item.cDynCom }}</span>
                </div>
                <span class="time">{{ item.tCreTm }}</span>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="btm-input">
        <div class="avatar" v-if="ruleForm.cCrePerNme">{{ ruleForm.cCrePerNme[ruleForm.cCrePerNme.length - 1] }}</div>
        <el-input class="input" @blur="saveDynamic" v-model="comment" placeholder="点击输入评论...." clearable></el-input>
      </div>
    </div>
    <correlation-work-item ref="correlationWork" @selection="handleSelection" />
  </el-drawer>
</template>

<script>
import CorrelationWorkItem from "@/views/projectManage/demand/correlationWorkItem";
import {mixin} from "@/views/projectManage/mixin";
import {upload} from "@/api/projectManage/workItem";
import {dyn, Dynamic} from "@/api/projectManage/demand";
import {emitTaskList} from "@/api/projectManage/task";
export default {
  name: "upDateForm",
  mixins: [mixin],
  components: {CorrelationWorkItem},
  data() {
    return {
      comment: '',
      dynamicList: [],
      schedule: '',
      tablist: [
        {
          label: '全部',
          num: 1
        },
        {
          label: '动态',
          num: 1
        },
        {
          label: '评论',
          num: 1
        },
        {
          label: '变更记录',
          num: 1
        }
      ],
      activeName: null,
      configList: [],
      loading: false,
      drawer: false,
      direction: 'rtl',
      disabled: false,
      ruleForm: {},
      rules: {
        cTaskSou: [
          { required: true, message: '未设置', trigger: 'change' },
        ],
        cTaskType: [
          { required: true, message: '未设置', trigger: 'change' },
        ],
        cTaskHead: [
          { required: true, message: '未设置', trigger: 'change' },
        ],
        cTaskState: [
          { required: true, message: '未设置', trigger: 'change' },
        ],
        cTaskPri: [
          { required: true, message: '未设置', trigger: 'change' },
        ],
      },
      sourceOption: [
        {
          label: '产品经理',
          value: '1'
        }
      ],
      stateOption: [
        {
          label: '未开始',
          value: '1'
        },
        {
          label: '进行中',
          value: '2'
        },
        {
          label: '已完成',
          value: '3'
        }
      ],
      participantList: [],
      isEmit: false,
      cWorkList: []
    }
  },
  computed: {
    workSchedule() {
      return this.ruleForm.cEstWork ? Math.round((this.ruleForm.cRegWork / (this.ruleForm.cRegWork + this.ruleForm.cRemWork)) * 100) + '%' : 0
    },
    deviation() {
      return Math.abs(this.ruleForm.cEstWork - (this.ruleForm.cRegWork + this.ruleForm.cRemWork)) + '小时'
    }
  },
  methods: {
    open({row}) {
      console.log(row)
      this.ruleForm = {
        ...row,
        cTaskType: Number(row.cTaskType),
        cTaskHead: Number(row.cTaskHead),
        cTaskPri: Number(row.cTaskPri),
        cCrePer: Number(row.cCrePer)
      }
      this.getMember()
      this.getListName()
      this.getTree()
      this.getDynamic()
      this.getWorkItem(row.cProNo)
      this.drawer = true
    },
    // 保存评论
    saveDynamic() {
      if (this.comment) {
        dyn({
          cPmNo: this.ruleForm.cTaskNo,
          cDynCom: this.comment
        }).then(res => {
          this.comment = ''
          this.$notify({title: '成功', message: '已上传评论！', type: 'success',})
          this.getDynamic()
        })
      }
    },
    // 获取动态
    getDynamic() {
      this.DynamicNum(this.ruleForm.cTaskNo)
      Dynamic({
        cPmNo: this.ruleForm.cTaskNo,
        cDynType: this.activeName > 0 ? this.activeName : null
      }).then(res => {
        this.dynamicList = res.data
      })
    },
    // 关联工作项
    correlation() {
      this.$refs.correlationWork.open()
    },
    // 回显关联工作项
    handleSelection(list) {
      const arr = []
      this.configList = list
      list.forEach(i => arr.push(i.cPmNo))
      this.ruleForm.cTaskWork = arr.join(',')
    },
    // 文件上传前
    handelUpLoad(file) {
      console.log(file)
    },
    // 删除关联项
    handleTabClose(scope) {
      this.configList.splice(scope.$index, 1)
    },
    // 动态切换
    handleClick() {
      this.getDynamic()
    },
    // 自定义文件上传地址
    requestUpload(params) {
      console.log(params)
      const data = new FormData()//自定义 参数类型必须为 FormData格式 此为强制要求
      data.append("file", params.file)
      data.append("cPmNo", this.projectInfo.cProNo)
      upload(data).then(res => {
        this.$notify({title: '成功', message: '上传成功！', type: 'success',});
      })
    },
    handleClose() {
      this.$refs['ruleForm'].resetFields();
      this.drawer = false
    },
    // 表单保存
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          emitTaskList(this.ruleForm).then(res => {
            this.getDynamic()
            this.$notify({title: '成功', message: '保存成功！', type: 'success',})
            this.$emit('upDate')
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 动态类名
    handleIcon(value) {
      let color = 'gray'
      if (value == 1) color = 'red2'
      if (value == 2) color = 'orange'
      if (value == 3) color = 'blue'
      return `icon ${color}`
    },
    // 选择参与者
    handleParticipant(val) {
      console.log(this.ruleForm.participantList)
      const list = []
      val.forEach(i => list.push(i[1]))
      this.ruleForm.participant = list
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
.close-icon {
  position: fixed;
  top: 130px;
  right: 920px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #C50405;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(188, 191, 200, 0.5098);
  color: #cccccc;
  font-size: 20px;
  z-index: 9999;
  cursor: pointer;
}

.title-id {
  padding: 20px 10px 20px 40px;
  background: linear-gradient(180deg, #FEFEFE 0%, #F7F7F7 100%);
  .id {
    margin-left: 5px;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }
  .operate {
    float: right;
    color: #777777;
  }
}
.info {
  padding: 30px 40px;
  .name {
    display: flex;
    height: 36px;
    line-height: 36px;
    .highest {
      position: relative;
      margin-top: 7px;
      padding: 0 15px;
      height: 24px;
      line-height: 24px;
      text-align: right;
      border: 1px solid rgba(188, 191, 200, 0.6);
      border-radius: 4px;
      font-size: 13px;
      .icon {
        position: absolute;
        top: 9px;
        left: 6px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
    }
    .xq {
      font-size: 24px;
      font-weight: 500;
      color: #3D3D3D;
    }
    .tab-box {
      margin: 5px 15px 0 15px;
    }
  }
  .person {
    margin-top: 10px;
    font-size: 14px;
    font-weight: normal;
    color: #666666;
  }
  .but {
    padding: 20px 0 20px 15px;
    .title-head {
      float: left;
    }
  }
  .des {
    padding: 15px 20px;
  }
  .demo-ruleForm {
    padding: 20px 0;
  }
  .text-work {
    margin: 0 0 15px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #333333
  }
  .upload-demo {
    margin-left: 10px;
    .icon {
      margin-top: 30%;
      font-size: 22px;
      color: #979797;
    }
    .text {
      line-height: 15px;
      font-size: 12px;
      font-weight: normal;
      color: #979797;
    }
  }
  .dynamic {
    width: 841px;
    height: 60px;
    border-radius: 4px;
    background: rgba(216, 216, 216, 0.19);
    padding: 10px 20px;
    font-family: Source Han Sans CN;
    .cont {
      font-weight: 400;
      font-size: 14px;
      overflow: hidden;
      .dynamic-name {
        font-weight: 700;
        font-size: 14px;
      }
    }
    .time {
      margin-top: 5px;
      font-size: 12px;
      font-weight: normal;
      color: #666666;
    }
  }
}
.button-pos {
  float: right;
  transform: translate(-15px, -3px);
}
.btm-input {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 68px;
  .avatar {
    position: absolute;
    top: 15px;
    left: 5%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background: #FF7B72;
    color: #FFFFFF;
    z-index: 999;
  }
  ::v-deep .input {
    position: absolute;
    left: 0;
    .el-input__inner {
      height: 68px;
      padding-left: 11%;
      font-size: 16px;
    }
  }
}
::v-deep .stateSelect {
  width: 96px;
  .el-input__inner {
    background: #FEF5EC;
    color: #F7933B;
    border: 1px solid #FAD0A1;
  }
}
.highest2 {
  position: relative;
  .icon {
    position: absolute;
    top: 14px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
.external {
  margin: 20px 15px;
}
::v-deep .inputNumber {
  width: 317px;
  .el-input__inner {
    text-align: left;
  }
}
::v-deep .el-upload-dragger {
  width: 109px;
  height: 109px;
  background: #F8F9FA;
}
.highest3 {
  position: relative;
  .icon {
    position: absolute;
    top: 8px;
    left: 25px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
</style>
